| Echarts 折线图y轴标签值太长时显示不全的解决办法 | 您所在的位置：网站首页 › html 曲线图 › Echarts 折线图y轴标签值太长时显示不全的解决办法 |
Echarts 折线图y轴标签值太长时显示不全的解决办法
|
问题分析解决办法
问题
先看一下正常的情况 先贴一下页面代码 HTML 最近30天 最近15周 最近12个月CSS .row-wrapper { padding: 10px 15px; border-top: 8px #eee solid; font-size: 15px; color: #737373; } .chart-tab { flex: 1; border-top: 1px #dcdcdc solid; border-left: 1px #dcdcdc solid; border-top-left-radius: 5px; border-top-right-radius: 5px; } .div-flex { display: -webkit-box; display: -webkit-flex; display: flex; } #chart-line { height: 26rem; padding-left: 14px; padding-top: 10px; border: 1px #dcdcdc solid; } .selected { background-color: #EAEAEA; }JS（这里只贴跟折线图有关的部分） var lineChart = echarts.init(document.getElementById('chart-line')); // 折线图配置 option = { tooltip: { trigger: 'axis', hideDelay: '300' }, xAxis: { show: false, type: 'category', data: [1, 2, 3, 4, 5, 6, 7], axisTick: { inside: true, alignWithLabel: true } }, yAxis: { type: 'value', name: '营业额(元)', axisTick: { inside: true }, scale: true }, series: [{ name: '营业额', type: 'line', data: [1100000, 2000000, 450000, 1370000, 1200000, 4030000, 2350000], // 因为是要分析的是前端问题，这里我就直接写一组很大的数据了，不管跟后台交互部分 lineStyle: { normal: { color: '#82c26b' } }, itemStyle: { normal: { color: '#82c26b' } } }] }; lineChart.setOption(option);然后页面运行的时候生成的html是这样的 可以看到 id=chart-line 的 div 是我定义的，而它里面多了两个元素，一个 div 和一个 canvas。这两个就是 Echarts 运行之后添加上去的，其中 canvas 就是图表本身，外层的 div 是一个装它的容器。 于是我尝试一下修改这几个元素的 width、margin、padding，发现……没用。 看下图 好吧，那咱们就去官网看API咯…… 解决办法官网在此：http://echarts.baidu.com/ 我们要看的是配置项的部分：http://echarts.baidu.com/option.html#title 可以改的地方有下面几个： yAxis.axisLabel.margin：刻度标签与轴线之间的距离。默认值是8，可以改小一点。不过本来的值已经很小了，这个没多大作用。yAxis.axisLabel.formatter：刻度标签的内容格式器，支持字符串模板和回调函数两种形式。比如可以设置太长了换行之类的。grid.left：grid 组件离容器左侧的距离。默认值是10%。最后的代码如下。这里就只列出修改了的部分了，比原来添加了 grid.left 和 yAxis.axisLabel。 option = { ... yAxis: { type: 'value', name: '营业额(元)', axisTick: { inside: true }, scale: true, axisLabel: { margin: 2, formatter: function (value, index) { if (value >= 10000 && value < 10000000) { value = value / 10000 + "万"; } else if (value >= 10000000) { value = value / 10000000 + "千万"; } return value; } }, }, grid: { left: 35 }, ... };最终效果还行。。 PS：最后忍不住要吐槽，这几个配置项找了我老半天啊囧 |
再看一下显示不全的情况 
所有的数据都是从后台取的，也就是说动态变化的，一开始的时候数据量不大不会出现问题，后面y轴的值越来越大的时候就出现了这个显示不全的情况。
修改了margin 和 padding 的之后在 chrome的debug模式下看 canvas 是这样的，能看到其实y轴文字部分还是在content（蓝色部分）里面的，所以就能明白为什么修改 canvas 的 margin、padding 不会起作用了。 于是能得出结论，这是 canvas 绘图的时候就定了的，所以要通过修改传给 echarts 的参数来修改。
【本文地址】
公司简介
联系我们